import React, { useEffect, useState } from 'react'
import { Table } from 'antd'
import dayjs from 'dayjs'

const Industry = ({ data }) => {
  const [columns, setColumns] = useState([])
  const [dataSource, setDataSource] = useState([])
  const [dataSource1, setDataSource1] = useState([])
  useEffect(() => {
    if (data.length) {
      const column = [
        {
          title: '行业',
          width: 100,
          dataIndex: 'industry_type',
          align: 'center'
        }
      ]
      data[0].data_time.map((v, i) => {
        let format = 'MM' + '月' + 'DD' + '日'
        //   format = 'MM' + '月' + 'DD' + '日' + 'HH' + '时'
        column.push({
          title: dayjs(v).format(format),
          width: 100,
          dataIndex: v,
          align: 'center',
          render: (v) => {
            return (
              <div
                style={{
                  height: '40px',
                  lineHeight: '40px',
                  background: v !== '--' ? 'rgba(197,224,180)' : '',
                  fontSize: '12px'
                }}
              >
                {v}
              </div>
            )
          }
        })
      })
      const dataSource = data.map((item) => {
        const obj = {
          industry_type: item.industry_type
        }
        item.data_time.map((v, i) => {
          let val = item.value[i]
          obj[v] = val
        })
        return obj
      })
      const dataSource1 = data.map((item) => {
        const obj = {
          industry_type: item.industry_type
        }
        item.data_time.map((v, i) => {
          let val = item.draution_value[i]
          obj[v] = val == 0 ? '--' : val
        })
        return obj
      })
      setColumns(column)
      setDataSource(dataSource)
      setDataSource1(dataSource1)
    }
  }, [data])
  return (
    <>
      <div>
        <div className="title">各区落实率</div>
        <Table
          size="small"
          bordered
          pagination={false}
          dataSource={dataSource}
          columns={columns}
          scroll={{ y: 350 }}
          rowKey={(row) => JSON.stringify(row)}
        />
      </div>
      <div>
        <div className="title">各区未落实总时长</div>
        <Table
          size="small"
          bordered
          pagination={false}
          dataSource={dataSource1}
          columns={columns}
          scroll={{ y: 350 }}
          rowKey={(row) => JSON.stringify(row)}
        />
      </div>
    </>
  )
}

export default Industry
